<div class="layui-tab layui-tab-brief" lay-filter="demo" lay-allowclose="true">
    <ul class="layui-tab-title">
        <li class="layui-this" lay-id="11">角色权限管理</li>
    </ul>
    <form class="layui-form">
        <div class="layui-tab-content">
            <div class="layui-form-item">
                <label class="layui-form-label">角色</label>
                <div class="layui-input-block" style="width: 450px">
                    <select name="rid" id="rolename" lay-filter="aihao">
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">选择权限</label>
                <div class="layui-input-inline">
                    <div id="demo" class="layui-form-select select-tree" style="width: 450px">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit="" lay-filter="rolesubmit">保存</button>
                </div>
            </div>
        </div>
    </form>
</div>
<script>
    menu.getMenuList();
</script>
<script>
    layui.use(['form', 'layedit', 'laydate'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate;

        $.ajax({
            type:"GET",
            url:"/admin/role/notadmin/list",
            async:false,
            success:function (data) {
                for(var i = 0;i<data.data.length;i++){
                    var val = data.data[i].name;
                    var id = data.data[i].id;
                    var opt = "<option value='"+ id +"'>"+ val +"</option>"
                    $("#rolename").append(opt);
                    form.render();
                }
            }
        });

        //监听提交
        form.on('submit(rolesubmit)', function(data){
            var da = data.field;
            var midList = da.demo;
            var mid =new Array(midList.split(","));
            if(mid[0].length !== 0)
            {
                axios.post('/admin/menu/delete/role/list?rid='+da.rid)
                    .then(function (response) {
                        if(response !== null){
                            $.each(mid[0],function (index,obj) {
                                $.ajax({
                                    type:"POST",
                                    url:"/admin/menu/add/role/list",
                                    data:{"rid":da.rid, "mid":obj},
                                    async:false,
                                    success:function (data) {
                                        if(data.code !== null){
                                            layer.alert('修改成功！')
                                        }else {
                                            layer.alert('修改失败！')
                                        }
                                    }
                                });
                            });
                        }else {
                            layer.alert('修改失败！')
                        }
                    })
                    .catch(function (error) {
                        console.log(error)
                    });
            }else {
                layer.alert('角色权限不可为空！')
            }
            return false;
        });
    });
</script>
<script>
    layui.use(['form', 'element'], function () {
    var zNodes = [
        {id: 1, pId: 0, name: "主页"},
        {id: 2, pId: 0, name: "系统管理", open: true},
        {id: 6, pId: 2, name: "用户管理"},
        {id: 7, pId: 2, name: "角色管理"},
        {id: 8, pId: 2, name: "权限管理"},
        {id: 3, pId: 0, name: "论坛管理", open: true},
        {id: 9, pId: 3, name: "公告管理"},
        {id: 10, pId: 3, name: "帖子管理"},
        {id: 11, pId: 3, name: "论坛参数"},
        {id: 12, pId: 3, name: "版块管理"},
        {id: 4, pId: 0, name: "统计管理", open: true},
        {id: 13, pId: 4, name: "论坛排行"},
        {id: 14, pId: 4, name: "数据动态"},
        {id: 5, pId: 0, name: "监控管理", open: true},
        {id: 15, pId: 5, name: "服务监控"}
    ];

    $(document).ready(function () {
        initSelectTree("demo", true, {"Y": "ps", "N": "s"})
        initSelectTree("demo2", false);
    });

        function initSelectTree(id, isMultiple, chkboxType) {
            var setting = {
                view: {
                    dblClickExpand: false,
                    showLine: false
                },
                data: {
                    simpleData: {
                        enable: true
                    }
                },
                check: {
                    enable: false,
                    chkboxType: {"Y": "ps", "N": "s"}
                },
                callback: {
                    onClick: onClick,
                    onCheck: onCheck
                }

            };
            if (isMultiple) {
                setting.check.enable = isMultiple;
            }
            if (chkboxType !== undefined && chkboxType != null) {
                setting.check.chkboxType = chkboxType;
            }
            var html = '<div class = "layui-select-title" >' +
                '<input id="' + id + 'Show"' + 'type = "text" placeholder = "请选择" value = "" class = "layui-input" readonly>' +
                '<i class= "layui-edge" ></i>' +
                '</div>';
            $("#" + id).append(html);
            $("#" + id).parent().append('<div class="tree-content scrollbar">' +
                '<input hidden id="' + id + 'Hide" ' +
                'name="' + $(".select-tree").attr("id") + '">' +
                '<ul id="' + id + 'Tree" class="ztree scrollbar" style="margin-top:0;"></ul>' +
                '</div>');
            $("#" + id).bind("click", function () {
                if ($(this).parent().find(".tree-content").css("display") !== "none") {
                    hideMenu()
                } else {
                    $(this).addClass("layui-form-selected");
                    var Offset = $(this).offset();
                    var width = $(this).width() - 2;
                    $(this).parent().find(".tree-content").css({
                        left: Offset.left + "px",
                        top: Offset.top + $(this).height() + "px"
                    }).slideDown("fast");
                    $(this).parent().find(".tree-content").css({
                        width: width
                    });
                    $("body").bind("mousedown", onBodyDown);
                }
            });
            $.fn.zTree.init($("#" + id + "Tree"), setting, zNodes);
        }

        function beforeClick(treeId, treeNode) {
            var check = (treeNode && !treeNode.isParent);
            if (!check) alert("只能选择城市...");
            return check;
        }

        function onClick(event, treeId, treeNode) {
            var zTree = $.fn.zTree.getZTreeObj(treeId);
            if (zTree.setting.check.enable == true) {
                zTree.checkNode(treeNode, !treeNode.checked, false)
                assignment(treeId, zTree.getCheckedNodes());
            } else {
                assignment(treeId, zTree.getSelectedNodes());
                hideMenu();
            }
        }

        function onCheck(event, treeId, treeNode) {
            var zTree = $.fn.zTree.getZTreeObj(treeId);
            assignment(treeId, zTree.getCheckedNodes());
        }

        function hideMenu() {
            $(".select-tree").removeClass("layui-form-selected");
            $(".tree-content").fadeOut("fast");
            $("body").unbind("mousedown", onBodyDown);
        }

        function assignment(treeId, nodes) {
            var names = "";
            var ids = "";
            for (var i = 0, l = nodes.length; i < l; i++) {
                names += nodes[i].name + ",";
                ids += nodes[i].id + ",";
            }
            if (names.length > 0) {
                names = names.substring(0, names.length - 1);
                ids = ids.substring(0, ids.length - 1);
            }
            treeId = treeId.substring(0, treeId.length - 4);
            $("#" + treeId + "Show").attr("value", names);
            $("#" + treeId + "Show").attr("title", names);
            $("#" + treeId + "Hide").attr("value", ids);
        }

        function onBodyDown(event) {
            if ($(event.target).parents(".tree-content").html() == null) {
                hideMenu();
            }
        }

    });
</script>


